{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

<style>
  .refer-friend-wrapper {
    position: relative;
    background: #F4F8FC;
    margin: 0 !important;
  }
  .pop-tip-wrapper {
    display: flex;
    position: relative;
    top: -112px;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    height: 224px;
  }
  .pop-tip-wrapper__icon {
    min-width: 164px;
    height: 164px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    justify-content: center;
    background: var(--light, #F4F8FC);
  }
  .pop-tip-wrapper__content {
    padding: 0 26px;
    width: 760px;
  }
  .pop-tip-wrapper__content-heading {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin: 12px 0;
  }
  .pop-tip-wrapper__content-desc {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  .pop-tip-wrapper__content-desc p {
    margin: 0;
  }
  .multicolumn-card__info-icon {
    height: 40px;
    line-height: 50px;
  }
  .refer-title-desc {
    color: var(--gray-2, #4F4F4F);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  .refer-friend-wrapper .multicolumn-card__info h3 {
    color: var(--gray-1, #333);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin: 12px 0;
  }
  .multicolumn-card__info-desc {
    color: var(--gray-3, #828282);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  .refer-content-wrapper {
    padding-bottom: 70px;
  }
  .pop-tip-wrapper__icon-mobile, .multicolumn-card__info-icon__mobile {
    display: none;
  }
  .pop-tip-wrapper__content .tips {
    color: var(--blue-1, #2F80ED);
    margin-top: 7px;
  }
  .refer-friend-wrapper .title-wrapper-with-link {
    align-items: center;
    justify-content: center;
  }
  .refer-friend-wrapper .contains-content-container {
    column-gap: 10px;
    row-gap: 25px;
  }
  
  .refer-note {
    display: none;
  }
  
  @media screen and (min-width: 901px ){
    .multicolumn-card__info-title {
      position: relative;
    }
    .multicolumn-card__info-title:not(.multicolumn-card__info-title-last)::after {
      content: "";
      display: block;
      background-image: url();
      background-repeat-y: no-repeat;
      background-repeat-x: repeat;
      background-position-x: left;
      position: absolute;
      right: 0;
      height: 4px;
      top: 50%;
      left: 100px;
      width: 90%;
      transform: translateY(-50%);
    }
  }
  
  @media screen and (max-width: 900px) {
    .grid--1-col-tablet-down .grid__item {
      width: 100%;
      max-width: 100%;
    }
    .pop-tip-wrapper__content .tips {
      margin-top: 0;
    }
    .multicolumn .title-wrapper-with-link {
      margin-bottom: 40px;
    }
    .refer-a-friend .multicolumn .refer-content-wrapper {
      padding-top: 60px;
    }
    .pop-tip-wrapper {
      margin: 0 2rem;
      top: -40px;
      display: block;
      height: unset;
      padding: 0 1.6rem 2rem;
    }
    .pop-tip-wrapper__icon {
      display: none;
    }
    .pop-tip-wrapper__icon-mobile {
      display: flex;
      padding: 20px 0;
      justify-content: center;
    }
    .pop-tip-wrapper__content {
      width: 100%; 
      padding: 0;
    }
    .pop-tip-wrapper__content-heading {
      color: #000;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      line-height: 22px;
      margin: 0;
    }
    .pop-tip-wrapper__content-desc {
      text-align: center;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 166.667% */
    }
    .refer-title-desc, .refer-title-text {
      text-align: left;
    }
    .refer-title-desc {
      font-size: 1.4rem; 
      text-align: center;
    }
    .title-wrapper--self-padded-mobile {
      padding: 0 2rem;
    }
    
    .multicolumn-card__info {
      display: flex;
      padding: 0;
    }
    .refer-friend-wrapper .multicolumn-card__info h3 {
      margin: 0;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px; /* 150% */
    }
    .multicolumn-list:not(.slider) {
      padding: 0 1.8rem;
    }
    .multicolumn-card .multicolumn-card__info-icon__mobile{
      min-width: 4.5rem;
      height: 38px;
      margin-top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .multicolumn-card .multicolumn-card__info-icon__mobile:not(.multicolumn-card__info-icon__mobile-last)::after {
      content: "";
      display: block;
      background-image: url();
      background-repeat-y: repeat;
      background-repeat-x: no-repeat;
      height: 75%;
      width: 4px;
      position: absolute;
      top: 40px;
    }
    
    .multicolumn-card .multicolumn-card__info-icon__mobile-2:not(.multicolumn-card__info-icon__mobile-last)::after { 
      top: 50px;
    }
    
    .multicolumn-card__info-icon {
      display: none;
    }
    .multicolumn-card__info-wrapper {
      margin-left: 1.8rem;
    }
    .multicolumn-card__info-desc {
      color: var(--gray-3, #828282);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      margin-top: 2px;
      padding-right: 20px;
    }
    .refer-note {
      display: block;
      margin-top: 30px;
    }
  }
</style>

<div class="multicolumn gradient refer-friend-wrapper">
  <div class="page-width">
    <div class="pop-tip-wrapper">
      <div class="pop-tip-wrapper__icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="70" height="67" viewBox="0 0 70 67" fill="none">
          <path d="M33.6901 19.8852H21.4826C19.6839 19.8852 17.9589 19.1793 16.6871 17.9226C15.4152 16.666 14.7007 14.9617 14.7007 13.1845C14.7007 11.4074 15.4152 9.70307 16.6871 8.44644C17.9589 7.18982 19.6839 6.48386 21.4826 6.48386C30.9774 6.48386 33.6901 19.8852 33.6901 19.8852Z" stroke="url(#paint0_linear_0_252)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M33.6902 19.8852H45.8977C47.6964 19.8852 49.4214 19.1793 50.6933 17.9226C51.9651 16.666 52.6796 14.9617 52.6796 13.1845C52.6796 11.4074 51.9651 9.70307 50.6933 8.44644C49.4214 7.18982 47.6964 6.48386 45.8977 6.48386C36.403 6.48386 33.6902 19.8852 33.6902 19.8852Z" stroke="url(#paint1_linear_0_252)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M55.3925 33.2889V60.0917H11.988V33.2889" fill="url(#paint2_linear_0_252)"/>
          <path d="M55.3925 33.2889V60.0917H11.988V33.2889H55.3925Z" stroke="url(#paint3_linear_0_252)" stroke-width="1.93548" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M60.8181 19.8843H6.5625V33.2857H60.8181V19.8843Z" stroke="url(#paint4_linear_0_252)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M34 33L34 20" stroke="url(#paint5_linear_0_252)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          <defs>
            <linearGradient id="paint0_linear_0_252" x1="24.1954" y1="6.48386" x2="24.1954" y2="19.8852" gradientUnits="userSpaceOnUse">
              <stop stop-color="#599BF4"/>
              <stop offset="1" stop-color="#0D74FF"/>
            </linearGradient>
            <linearGradient id="paint1_linear_0_252" x1="43.1849" y1="6.48386" x2="43.1849" y2="19.8852" gradientUnits="userSpaceOnUse">
              <stop stop-color="#599BF4"/>
              <stop offset="1" stop-color="#0D74FF"/>
            </linearGradient>
            <linearGradient id="paint2_linear_0_252" x1="33.6903" y1="33.2889" x2="33.6903" y2="60.0917" gradientUnits="userSpaceOnUse">
              <stop stop-color="#599BF4"/>
              <stop offset="1" stop-color="#0D74FF"/>
            </linearGradient>
            <linearGradient id="paint3_linear_0_252" x1="33.6903" y1="33.2889" x2="33.6903" y2="60.0917" gradientUnits="userSpaceOnUse">
              <stop stop-color="#599BF4"/>
              <stop offset="1" stop-color="#0D74FF"/>
            </linearGradient>
            <linearGradient id="paint4_linear_0_252" x1="33.6903" y1="19.8843" x2="33.6903" y2="33.2857" gradientUnits="userSpaceOnUse">
              <stop stop-color="#599BF4"/>
              <stop offset="1" stop-color="#0D74FF"/>
            </linearGradient>
            <linearGradient id="paint5_linear_0_252" x1="34.5" y1="20" x2="34.5" y2="33" gradientUnits="userSpaceOnUse">
              <stop stop-color="#599BF4"/>
              <stop offset="1" stop-color="#0D74FF"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="pop-tip-wrapper__icon-mobile">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="26" viewBox="0 0 28 26" fill="none">
          <path d="M13.4762 7.71665H8.59315C7.87368 7.71665 7.18367 7.44269 6.67493 6.95505C6.16618 6.4674 5.88037 5.80601 5.88037 5.11638C5.88037 4.42675 6.16618 3.76536 6.67493 3.27771C7.18367 2.79007 7.87368 2.51611 8.59315 2.51611C12.391 2.51611 13.4762 7.71665 13.4762 7.71665Z" stroke="#2F80ED" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M13.4761 7.71665H18.3591C19.0785 7.71665 19.7686 7.44269 20.2773 6.95505C20.786 6.4674 21.0719 5.80601 21.0719 5.11638C21.0719 4.42675 20.786 3.76536 20.2773 3.27771C19.7686 2.79007 19.0785 2.51611 18.3591 2.51611C14.5612 2.51611 13.4761 7.71665 13.4761 7.71665Z" stroke="#2F80ED" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M22.1569 12.9181V23.3192H4.79517V12.9181" fill="#2F80ED"/>
          <path d="M22.1569 12.9181V23.3192H4.79517V12.9181H22.1569Z" stroke="#2F80ED" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M24.3272 7.71625H2.625V12.9168H24.3272V7.71625Z" stroke="#2F80ED" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M13.3 19.8421L13.3 7.52631" stroke="#2F80ED" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="pop-tip-wrapper__content">
        <div class="pop-tip-wrapper__content-heading">
          {{ section.settings.tip_title }}
        </div>
        <div class="pop-tip-wrapper__content-desc">
          <p>{{ section.settings.tip_desc }}</p>
          <p class="tips">{{ section.settings.tip_next }}</p>
        </div>
      </div>
    </div>
    <div class="section-{{ section.id }}-padding isolate refer-content-wrapper">
      {%- unless section.settings.title == blank -%}
        <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
          <h2 class="title {{ section.settings.heading_size }} refer-title-text">
            {{ section.settings.title | escape }}
          </h2>
          {%- if section.settings.desc != blank -%}
            <span class="refer-title-desc">{{ section.settings.desc | escape }}</span>
          {%- endif -%}
        </div>
      {%- endunless -%}
      <slider-component class="slider-mobile-gutter">
        <ul class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop"
          id="Slider-{{ section.id }}"
          role="list"
        >
          {%- for block in section.blocks -%}
            <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>            
              <div class="multicolumn-card content-container">
                <div class="multicolumn-card__info">
                  {%- if block.settings.icon != blank -%}
                    <div class="multicolumn-card__info-icon">{{ block.settings.icon }}</div>
                  {%- endif -%}
                  {%- if block.settings.icon_mobile != blank -%}
                  <div class="multicolumn-card__info-icon__mobile multicolumn-card__info-icon__mobile-{{ forloop.index }} {% if forloop.index ==  section.blocks.size %} multicolumn-card__info-icon__mobile-last {% endif %}">{{ block.settings.icon_mobile }}</div>
                  {%- endif -%}
                  <div class="multicolumn-card__info-wrapper">
                    {%- if block.settings.title != blank -%}
                      <h3 class="multicolumn-card__info-title {% if forloop.index ==  section.blocks.size %} multicolumn-card__info-title-last {% endif %}">{{ block.settings.title | escape }}</h3>
                    {%- endif -%}
                    {%- if block.settings.desc != blank -%}
                      <div class="multicolumn-card__info-desc">{{ block.settings.desc }}</div>
                      {% if  forloop.index ==  section.blocks.size %}
                        <div class="refer-note multicolumn-card__info-desc">
                          {{ section.settings.note }}
                        </div>
                      {% endif %}
                    {%- endif -%}
                  </div>
                </div>
              </div>
            </li>
          {%- endfor -%}
        </ul>
        
      </slider-component>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.multicolumn.name",
  "class": "section multicolumn-refer-friend",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "tip_title",
      "default": "Share the Joy of Ebiking",
      "label": "Tip Title"
    },
    {
      "type": "text",
      "id": "tip_desc",
      "default": "Let your loved ones discover the exceptional experience of our electric bicycles, with a $60 discount on their first purchase, while you receive a reward of 5000 Rider Points for each successful referral.",
      "label": "Desc"
    },
    {
      "type": "text",
      "id": "tip_next",
      "default": "5000 Rider Points = $50 off redeemed at checkout",
      "label": "Tip"
    },
    {
      "type": "text",
      "id": "title",
      "default": "How it Works",
      "label": "Title"
    },
    {
      "type": "text",
      "id": "desc",
      "default": "Share as many times as you like! There is no limit to how many points you can earn.",
      "label": "Description"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.multicolumn.settings.columns_desktop.label"
    },
    {
      "type": "header",
      "content": "t:sections.multicolumn.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.multicolumn.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    },
    {
      "type": "text",
      "id": "note",
      "label": "note"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "html",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "html",
          "id": "icon_mobile",
          "label": "Icon Mobile"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "html",
          "id": "desc",
          "default": "Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.",
          "label": "Description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multicolumn refer friend",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}
